<template>
  <transition :name="tabsActivePath">
    <div class="fx-tabs-item" v-if="tabsCurrentActive===name">
      <slot/>
    </div>
  </transition>
</template>

<script lang="ts">
import { defineComponent, inject, onBeforeMount, PropType, SetupContext, Slot } from 'vue'
import { Emitter } from 'mitt'

export interface TabsItemProps {
  title: string | number;
  name: string | number;
  closable: boolean;
  slotTitle?: Slot;
}

export default defineComponent({
  name: 'fxTabsItem',
  props: {
    // 标签头
    title: {
      type: [String, Number] as PropType<string | number>,
      default: ''
    },
    // 标签索引
    name: {
      type: [String, Number] as PropType<string | number>,
      required: true
    },
    // 关闭按钮
    closable: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup (props: TabsItemProps, ctx: SetupContext) {
    const tabsMittEmit = inject<Emitter['emit'] | undefined>('tabsMittEmit', undefined)
    const tabsCurrentActive = inject<string | number | undefined>('currentActive', undefined)
    const tabsActivePath = inject<'to-right' | 'to-left'>('tabsActivePath', 'to-right')

    onBeforeMount(() => {
      tabsMittEmit && tabsMittEmit('tabsItemEmit', {
        title: props.title ?? props.name,
        name: props.name,
        closable: props.closable,
        slotTitle: ctx.slots.title
      })
    })

    return {
      tabsActivePath,
      tabsCurrentActive
    }
  }
})
</script>
